<template>
    <div class="login_container">
        <img src="../assets/test.jpg" />
        <!-- 登录块 -->
        <div class="login_box">
            <!-- 头像块 -->
            <!-- <div class="avatar_box">
                <img src="../assets/yhzc.png" />
            </div> -->
            <span>欢迎登陆</span>
            <!-- 表单 -->
            <el-form ref="loginFromRef" :rules="LoginResult" :model="Loginform" class="login_form" label-width="0">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-tooltip class="item" effect="dark" content="用户名：长度在 5 到 12 个字符" placement="top">
                    <el-input v-model="Loginform.username" prefix-icon="iconfont icondenglu"></el-input>
                    </el-tooltip>
                </el-form-item>
                 <!-- 密码 -->
                <el-form-item prop="password">
                    <el-tooltip class="item" effect="dark" content="密码：长度在 6 到 10 个字符" placement="bottom">
                    <el-input v-model="Loginform.password" prefix-icon="iconfont iconmima" type="password" show-password></el-input>
                    </el-tooltip>
                </el-form-item>

                <div class="span_div">
                    <span class="span_text" @click="modifyPass">忘记密码 </span>
                    <el-divider direction="vertical"></el-divider>
                    <span class="span_text" @click="reg"> 注册</span>
                </div>

                 <!-- 按钮 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="resetlogin">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
           Loginform:{
               username:"admin",//初始值username
               password:"a123456"//初始值password
           },
           LoginResult:{
               username:[
                   { required: true, message: '请输入用户名', trigger: 'blur' },//必填项校验
                   { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }//长度校验
               ],
               password:[
                   { required: true, message: '请输入用户密码', trigger: 'blur' },//必填项校验
                   { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }//长度校验
               ],
           },
        };
    },
    methods:{
        //注册
        reg() {
        this.$router.push({ path: "/reg" }); //页面路由跳转
        },
        //忘记密码
        modifyPass() {
        this.$router.push({ path: "/verify" }); //页面路由跳转
        },

        //重置表单
        resetlogin(){
            this.$refs.loginFromRef.resetFields();
            //console.log(123);
        },
        //登录方法
        login(){
            //异步表单校验
            this.$refs.loginFromRef.validate(async valid =>{
                if( !valid ) return; //判断输入格式是否正确
                const {data:res} = await this.$axios.post("/login",this.Loginform);//提交，访问后台（请求数据）
                //console.log(res)
                if(res == "ok"){
                    this.$message.success("登录成功");//信息提示
                    this.$router.push({path:"/home"});//页面路由跳转
                }else{
                    this.$message.error("用户名或密码错误");//错误提示
                }
            })
        },
    },
}
</script>
<style lang="less" scoped>
//跟节点样式
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}
// 登录框
// .login_box {
//   width: 450px;
//   height: 300px;
//   background-color: #fff;
//   border-radius: 3px;// 圆角
//   position: absolute;// 绝对定位
//   left: 50%;
//   top: 50%;
//   transform: translate(-50%, -50%);// 根据自己位置 以自己为长度位移
//   // 头像框
//   .avatar_box {
//     width: 130px;
//     height: 130px;
//     border: 1px solid #eee;
//     border-radius: 50%; // 加圆角
//     padding: 10px;
//     box-shadow: 0 0 10px #ddd;// 盒子阴影
//     position: absolute;
//     left: 50%;
//     transform: translate(-50%, -50%);
//     background-color: #0ee;
//     img {
//       width: 100%;
//       height: 100%;
//       border-radius: 50%; // 加圆角
//       background-color: #eee;
//     }
//   }
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px; // 圆角
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); // 根据自己位置 以自己为长度位移
.avatar_box {
    width: 100%;
    height: 15%;
    background: #66b1ff;
    //box-shadow: 0 0 10px blue;// 盒子阴影
    position: absolute;
    span {
      color: #ffffff;
      font-size: 22px;
      text-align: center;
      display: block;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .btns {
    display: flex;// 弹性布局
    justify-content: flex-end; // 尾部对齐
  }
  .login_form {
    position: absolute;
    bottom: 0%;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;// 设置边框
  }
  .span_div {
    display: flex; // 弹性布局
    justify-content: flex-end; // 尾部对齐
    font-size: 10px;
    margin-bottom: 25px;
    .span_text {
      cursor: pointer;
      color: #409eff;
    }
    span {
      color: #e6e8ec;
    }
  }
}
</style>